<template>
  <div class="ShiftStrategy">
    <div class="ShiftStrategy-top">
      <div class="ShiftStrategy-title">
        <p>管理列表</p>
      </div>
      <div class="ShiftStrategy-btns">
        <el-button type="primary" class="newAdd" @click="addCollege">
          <i class="el-icon-plus"></i>
          新增
        </el-button>
        <el-button type="primary" class="moreDelete" @click="moreDelete">
          <i class="el-icon-close"></i>
          批量删除
        </el-button>
      </div>
    </div>
    <div class="ShiftStrategy-table">
      <div class="tableData">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{ textAlign: 'center', background: '#f3f8fc' }"
          :cell-style="{ textAlign: 'center' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="序号" type="index" width="50"> </el-table-column>
          <el-table-column prop="strategyName" label="策略名称">
          </el-table-column>
          <el-table-column prop="studentSourseText" label="学生来源">
          </el-table-column>
          <el-table-column prop="classNumber" label="班级人数"> </el-table-column>
          <el-table-column prop="education" label="学历"> </el-table-column>
          <!-- <el-table-column prop="isUsing" label="启用状态">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.isUsing"
                active-color="#13ce66"
                inactive-color="#C2C2C2"
                active-value="0"
                inactive-value="1"
                @change="changeSwitch(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column> -->
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <span class="edit" @click="handleEdit(scope.row)">编辑</span>
              <span class="del" @click="handleDelete(scope.row)">删除</span>
              <!-- <img
                class="edit"
                @click="handleEdit(scope.row)"
                src="../../assets/edit.png"
                alt=""
              />
              <img
                class="del"
                @click="handleDelete(scope.row)"
                src="../../assets/del.png"
                alt=""
              /> -->
              <!-- <i @click="handleEdit(scope.$index, scope.row)" class="el-icon-edit-outline"></i>
                            <i @click="handleDelete(scope.$index, scope.row)" class="el-icon-delete"></i> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹框 -->
        <el-dialog
          :title="addOrEditTitle ? '添加分班策略' : '修改分班策略'"
          :visible.sync="editFlag"
          width="700px"
          height="500px"
        >
          <el-form :model="rowItem" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="策略名称：" prop="strategyName">
              <div class="addInput">
                <!-- <p class="strategyName">策略名称：</p> -->
                <el-input
                  v-model="rowItem.strategyName"
                  placeholder="请输入策略名称"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="班级人数：" prop="classNumber">
              <div class="addInput">
                <!-- <p class="strategyName">策略名称：</p> -->
                <el-input
                  v-model="rowItem.classNumber"
                  placeholder="请设置班级人数"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="学生来源：" prop="studentSourse">
              <div class="addInput">
                <!-- <p class="strategyName">策略名称：</p> -->
                <el-select v-model="rowItem.studentSourse" placeholder="请选择">
                  <el-option
                    v-for="item in studentSourseOptions"
                    :key="item.typeId"
                    :label="item.typeName"
                    :value="item.typeId + ''"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="学历：" prop="education">
              <div class="addInput">
                <!-- <p class="strategyName">策略名称：</p> -->
                <el-select v-model="rowItem.education" placeholder="请选择学历">
                  <el-option
                    v-for="item in educationOptions"
                    :key="item.value"
                    :label="item.typeName"
                    :value="item.typeName"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
          </el-form>
          <!-- <div class="addInput">
            <p class="strategyName">策略名称：</p>
            <el-input
              v-model="rowItem.strategyNameValue"
              placeholder="请输入策略名称"
            ></el-input>
          </div>
          <div class="addInput">
            <p class="classSize">班级人数：</p>
            <el-input
              v-model="rowItem.classSizeVAlue"
              placeholder="设置班级人数"
            ></el-input>
          </div>
          <div class="addSelect">
            <p class="superiorCollege">学生来源：</p>
            <el-select v-model="rowItem.studentSourceValue" placeholder="请选择">
              <el-option
                v-for="item in studentSourseOptions"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </div>
          <div class="educationInput">
            <p class="superiorCollege">学历：</p>
            <el-select v-model="rowItem.educationValue" placeholder="请选择">
              <el-option
                v-for="item in educationOptions"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              >
              </el-option>
            </el-select>
          </div> -->
          <!-- <div slot="footer" class="dialog-footer">
            <el-button class="cancel" @click="editFlag = false"
              >取 消</el-button
            >
            <el-button class="determine" type="primary" @click="editBtn"
              >确 定</el-button
            >
          </div>
          <transition name="fade">
            <p class="message" v-if="isShowMsg">信息不能为空</p>
          </transition> -->
        </el-dialog>
      </div>
      <div class="block" v-show="tableData.length">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="10"
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, next, jumper"
          ref="pagination"
          :total="total"
        >
        </el-pagination>
        <el-button class="sure" type="primary">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { _debounce } from "@/utils/debounce";
import {
  divideClassesStrategyApi,
  addDivideClassesStrategyApi,
  editDivideClassesStrategyApi,
  moreDelete,
  getStudentSourceApi
} from "@/api/basics/shiftStrategy"
export default {
  name: "ShiftStrategy",
  data() {
    return {
      tableData: [],
      // 显示当前第几页
      currentPage: 1,
      // 弹框开关
      editFlag: false,
      // 策略名称
      rowItem:{
        strategyNameValue: '',
        classSizeVAlue: '',
        studentSourceValue: '',
        educationValue: '',
        selectId: ''
      },
      // 学生来源下拉框
      studentSourseOptions: [
        // {
        //   id: "0",
        //   value: "社招",
        //   label: "社招",
        // },
        // {
        //   id: "1",
        //   value: "统招",
        //   label: "统招",
        // },
        // {
        //   id: "2",
        //   value: "单招",
        //   label: "单招",
        // },
      ],
      // 学历下拉框
      educationOptions:[
        {
          id: "0",
          value: "小学",
          label: "小学",
        },
        {
          id: "1",
          value: "中学",
          label: "中学",
        },
        {
          id: "2",
          value: "高中",
          label: "高中",
        },
        {
          id: "3",
          value: "专科",
          label: "专科",
        },
        {
          id: "4",
          value: "本科",
          label: "本科",
        },
        {
          id: "5",
          value: "研究生",
          label: "研究生",
        },
      ],
      // 弹框表头
      addOrEditTitle: false,
      isShowMsg: false,
      // timeout: "",
      // 存放选中数据
      // multipleSelection: [],
      // 获取选中的id
      // selectId: "",
      ids:'', // 选中checked数据拼接id
      total:0,  // 总条数
      rules: {
          strategyName: [
            { required: true, message: '请输入策略名称', trigger: 'blur' },
          ],
          classNumber: [
            { required: true, message: '请设置班级人数', trigger: 'blur' }
          ],
          // studentSourse: [
          //   { required: true, message: '请选择学生来源', trigger: 'blur' }
          // ],
          // education: [
          //   { required: true, message: '请选择学历', trigger: 'blur' }
          // ]
        }
    };
  },
  mounted() {
    getStudentSourceApi({parentId:70}).then(res=>{
      this.studentSourseOptions = res.rows
    })
    getStudentSourceApi({parentId:230}).then(res=>{
      this.educationOptions = res.rows
    })
    this.getTableListApi()
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳到第";
    
  },
  methods: {

    getTableListApi() {
      divideClassesStrategyApi({pageSize:'10',pageNum:this.currentPage}).then((res) =>{
        console.log(res);
        if(res.code === 200) {
          this.tableData = res.rows
          this.total = res.total
          // this.$nextTick(()=>{
            this.tableData.forEach(item=>{
            this.studentSourseOptions.forEach(it=>{
              console.log(123);
              if(item.studentSourse == it.typeId) {
                item.studentSourseText = it.typeName
                console.log(item.studentSourseText,'studentSourseText');

              }
            })
          })
          // })
        }
      })
    },
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.addOrEditTitle === false) {
                this.editFlag = false;
                // let data = {
                //   strategyName: this.rowItem.strategyNameValue,
                //   classNumber: this.rowItem.classSizeVAlue,
                //   studentSourse: this.rowItem.studentSourceValue,
                //   education: this.rowItem.educationValue,
                //   stragegyId: this.rowItem.selectId
                // }
                editDivideClassesStrategyApi(this.rowItem).then((res)=>{
                  if(res.code === 200 || res.code === 0) {
                      this.$message({
                        type: 'success',
                        message: '修改成功',
                      });
                      this.getTableListApi()
                    } else {
                      this.$message({
                        type: 'error',
                        message: '修改失败',
                      });
                    }
                })
              } else {
                  // let data = {
                  //   strategyName:  this.rowItem.strategyNameValue,
                  //   classNumber:  this.rowItem.classSizeVAlue,
                  //   studentSourse:  this.rowItem.studentSourceValue,
                  //   education:  this.rowItem.educationValue
                  // }
                  addDivideClassesStrategyApi(this.rowItem).then((res)=>{
                    console.log(res)
                    if(res.code === 200 || res.code === 0) {
                      this.$message({
                        type: 'success',
                        message: '添加成功',
                      });
                      this.getTableListApi()
                    } else {
                      this.$message({
                        type: 'error',
                        message: '添加失败',
                      });
                    }
                  })
                  this.editFlag = false;
              }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.editFlag = false
    },
    // 删除按钮
    handleDelete(row) {
        this.$confirm("确认删除记录吗?", "提示", {
          type: "warning",
        }).then(() => {
          moreDelete({ids:row.stragegyId}).then((res)=>{
            if(res.code === 200 || res.code === 0) {
              this.$message({
                type: 'success',
                message: '删除成功',
              });
            }else {
              this.$message({
                type: 'error',
                message: '删除失败',
              });
            }
            this.getTableListApi()
          })
        });
    },
    // 批量删除
    moreDelete() {
        this.$confirm("确认删除记录吗?", "提示", {
          type: "warning",
        }).then(() => {
          moreDelete({ids:this.ids}).then((res) =>{
            this.getTableListApi()
            if(res.code === 200 || res.code === 0) {
              this.getTableListApi()
              this.$message({
                type: 'success',
                message: '删除成功',
              });
            }else {
              this.$message({
                type: 'error',
                message: '删除失败，请检查是否有选择节点',
              });
            }
          })
        }).catch(() => {
                 
        });
      
    },
        // table switch开关
    // async changeSwitch(scope) {
    //   console.log(scope,'------------>');
    //   const data = await editDivideClassesStrategyApi({status:scope.status,stragegyId:scope.stragegyId})
    //   console.log(data);
    //   if(data.code === 200) {
    //     this.$message({
    //         type: 'success',
    //         message: '操作成功',
    //       });
    //   }else {
    //     this.$message({
    //         type: 'error',
    //         message: '操作失败',
    //       });
    //   }
    //   this.getTableListApi()
    // },
    // 弹框确定按钮
    editBtn: _debounce(function () {
      if (this.addOrEditTitle === false) {
        this.editFlag = false;
        let data = {
          strategyName: this.rowItem.strategyNameValue,
          classNumber: this.rowItem.classSizeVAlue,
          studentSourse: this.rowItem.studentSourceValue,
          education: this.rowItem.educationValue,
          stragegyId: this.rowItem.selectId
        }
        editDivideClassesStrategyApi(data).then((res)=>{
          if(res.code === 200 || res.code === 0) {
              this.$message({
                type: 'success',
                message: '修改成功',
              });
              this.getTableListApi()
            } else {
              this.$message({
                type: 'error',
                message: '修改失败',
              });
            }
        })
      } else {
        if (
          this.rowItem.strategyNameValue !== "" &&
          this.rowItem.classSizeVAlue !== "" &&
          this.rowItem.studentSourceValue !== "" &&
          this.rowItem.educationValue !== ""
        ) {
          let data = {
            strategyName:  this.rowItem.strategyNameValue,
            classNumber:  this.rowItem.classSizeVAlue,
            studentSourse:  this.rowItem.studentSourceValue,
            education:  this.rowItem.educationValue
          }
          addDivideClassesStrategyApi(data).then((res)=>{
            console.log(res)
            if(res.code === 200 || res.code === 0) {
              this.$message({
                type: 'success',
                message: '添加成功',
              });
              this.getTableListApi()
            } else {
              this.$message({
                type: 'error',
                message: '添加失败',
              });
            }
          })
          this.editFlag = false;
        } else {
          this.$message({
            message: "请填写完整信息",
          });
        }
      }
    }, 100),
    // table  修改
    handleEdit(row) {
      console.log(row);
        this.addOrEditTitle = false;
        this.editFlag = true;
        this.rowItem = row
        this.rowItem.studentSourceValue = Number(row.studentSourse)
        console.log(row.studentSourse);
        // this.rowItem = {
        //   strategyNameValue : row.strategyName,
        //   classSizeVAlue : row.classNumber,
        //   studentSourceValue : row.studentSourse,
        //   educationValue : row.education,
        //   selectId : row.stragegyId
        // }
    },
    // 添加信息
    addCollege() {
      this.editFlag = true;
      this.addOrEditTitle = true;
      this.rowItem =  {
        strategyNameValue: '',
        classSizeVAlue: '',
        studentSourceValue: '',
        educationValue: '',
        selectId: ''
      }
     
    },

    // 复选框事件
    handleSelectionChange(val) {
      var arrTostring = []
      val.forEach(item => {
        if(arrTostring.indexOf(item.stragegyId) === -1){
          arrTostring.push(item.stragegyId)
        }
      });
      this.ids = arrTostring.toString()
    },
    // 分页  事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getTableListApi()
    },
  },
};
</script>

<style lang="scss" scoped>
.ShiftStrategy {
  min-width: 100vh;
  width: 100%;
  height: 100%;
  padding: 0 20px 20px 15px;
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
  box-sizing: border-box;

  ::v-deep .el-dialog {
    width: 700px;
    height: 515px;
    border-radius: 10px;
    text-align: right;
    font-weight: 600;
    .fade-enter-active,
    .fade-leave-active {
      transition: opacity 0.3s;
    }
    .message {
      position: absolute;
      left: 44%;
      top: 50%;
      width: 140px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      color: #fff;
      border-radius: 10px;
      background-color: rgba(0, 0, 0, 0.4);
    }
    .fade-enter,
        .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
    .el-dialog__header {
      border-radius: 10px 10px 0 0;
      text-align: center;
      background-color: rgb(72, 149, 219);
      .el-dialog__title {
        color: #fff;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #fff;
      }
    }
    .addInput {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      p {
        width: 100px;
      }
      .el-input {
        width: 300px;
        margin-left: 20px;
      }
    }
    .addSelect {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;
      p {
        width: 100px;
      }
      .addSelect {
        width: 70px;
      }
      .el-input {
        width: 300px;
        margin-left: 20px;
      }
    }
    .educationInput {
      display: flex;
      justify-content: center;
      align-items: center;
      p {
        width: 100px;
      }
      .el-input {
        width: 300px;
        margin-left: 20px;
      }
    }
    .el-dialog__body {
      height: 270px;
      position: relative;
      .el-form-item {
        display: flex;
        justify-content: center;
        .el-form-item__content {
          // width: 500px;
          margin-left: 0 !important;
          justify-content: space-around;
          // .el-select {
          //   // width: 300px;
          // }
          .el-input {
            width: 300px;
          }
          button {
            width: 100px;
            height: 35px;
            border-radius: 16px;
            line-height: 0;
            // margin-left: 60px;
          }
        }
      }
    }
    .dialog-footer {
      text-align: center;
      button {
        width: 100px;
        height: 35px;
        border-radius: 16px;
        line-height: 0;
      }
      button {
        width: 100px;
        height: 35px;
        border-radius: 16px;
        line-height: 0;
      }
      .cancel {
        border: none;
        color: #848383;
        background-color: #f0f0f0;
      }
      .determine {
        border: none;
        background-color: #4995dc;
      }
    }
  }
  .ShiftStrategy-top {
    height: 60px;
    display: flex;
    background: #fff;
    justify-content: space-between;
    align-items: center;
    .ShiftStrategy-title {
      width: 300px;
      font-size: 16px;
      font-weight: 600;
      color: rgb(57, 141, 220);
      margin-left: 10px;
      p {
        width: 300px;
      }
    }
    .ShiftStrategy-btns {
      width: 300px;
      button {
        border: none;
      }
      .newAdd {
        background-color: rgb(86, 164, 212);
      }
      .moreDelete {
        background-color: rgb(241, 129, 143);
      }
    }
  }
  .ShiftStrategy-table {
    width: 100%;
    height: 100%;
    background-color: white;
    .tableData {
      background: #fff;
      overflow-y: auto;

      ::v-deep .el-table thead tr {
        background-color: #f2f8fb !important;
      }
      ::v-deep .el-table tr:nth-child(2n) {
        background-color: #f9f9f9;
      }
      .edit {
        width: 15px;
        cursor: pointer;
        height: 15px;
        // font-weight: bold;
        color: #1990FF;
      }
      .del {
        cursor: pointer;
        width: 15px;
        height: 15px;
        margin-left: 10px;
        // font-weight: bold;
        color: #1990FF;
      }

      ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #86caf0;
        border-color: #86caf0;
      }

      ::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #86caf0;
        border-color: #86caf0;
      }
      .el-icon-delete {
        color: red;
        font-weight: bold;
        margin-left: 15px;
        font-size: 18px;
      }
      .el-icon-edit-outline {
        font-size: 18px;
        font-weight: bold;
        color: rgb(142, 198, 216);
      }
    }
    .block {
      width: 100%;
      height: 65px;
      display: flex;
      padding: 0 20px;
      align-items: center;
      justify-content: right;
      background-color: #fff;

      ::v-deep .btn-prev {
        border: solid 1px #e6e6e6;
        border-radius: 5px;
        color: #6f6f6f;
      }

      ::v-deep .btn-next {
        border: solid 1px #e6e6e6;
        border-radius: 5px;
        color: #6f6f6f;
      }
      ::v-deep .el-pager li {
        background: #fff;
        font-size: 13px;
        min-width: 30.5px;
        height: 28px;
        line-height: 28px;
        box-sizing: border-box;
      }

      ::v-deep .el-pager li.active {
        background-color: #4895db;
        color: #fff;
        cursor: default;
      }
      ::v-deep .number {
        border: solid 1px #e6e6e6;
        margin: 0 5px;
        border-radius: 5px;
        color: #6f6f6f;
      }
      ::v-deep .el-button {
        // width: 50px;
        height: 28px;
        line-height: 0;
      }
      .sure {
        width: 50px;
        height: 30px;
        line-height: 0;
        text-align: center;
        padding: 0;
      }
    }
  }
}
</style>